<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogShow"
      @open="openEvents"
      @close="previewClosed"
      width="60%"
    >
      <el-row :gutter="20">
        <el-col :span="6" prop="questionType">
          <div class="grid-content bg-purple">【题型】：{{transType(list.questionType)}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【编号】：{{list.id}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【难度】：{{transDifficulty(list.difficulty)}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【标签】：{{list.tags}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">【学科】：{{list.subject}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【目录】：{{list.catalog}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【方向】：{{list.direction}}</div>
        </el-col>
      </el-row>
      <!-- {{list.question}} -->
      <el-row class="question bg-purple">
        【题干】：
        <p class="questColor" v-html="list.question"></p>
        <el-row v-if="list.questionType!=='3'">
          <el-row>{{transType(list.questionType)}} 选项：（以下选中的选项为正确答案）</el-row>
          <template>
            <div style="margin:5px 0 " v-for="item in list.options" :key="item.id">
              <el-radio @change="rejectChange(item)" v-model="item.isRight" :label="1">{{item.title}}</el-radio>
            </div>
          </template>
        </el-row>
      </el-row>
      <el-row class="video bg-purple">
        【参考答案】：
        <el-button type="danger" @click="openVideo">视频预览</el-button>
          <div class="demo" v-if="flag">
            <video ref="myvideo" width="320" height="240" type="video/mp4" poster controls></video>
          </div>
      </el-row>
      <el-row class="foot-content answer bg-purple">
        【答案解析】：
        <span style="display:inline-block;" v-html="list.answer"></span>
      </el-row>
      <el-row class="foot-content remarks bg-purple">【题目备注】：{{list.remarks}}</el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewClosed">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/questions";
export default {
  props: {
    dialogShow: {
      type: Boolean
    }
  },
  data() {
    return {
      list: {
        questionType: "",
        id: "",
        difficulty: "",
        tags: "",
        subject: "",
        catalog: "",
        direction: "",
        question: "",
        answer: "",
        remarks: "",
        videoURL: "",
        options: []
      },
      isRight:false,
      flag:false
      //  questType:true
    };
  },
  methods: {
    async fetchQuestionsList({ id }) {
      const res = await detail({ id: id });
      // console.log(res.data)
      this.list = res.data;
    },

    transDifficulty(value){
      const TYPES = {
        1:'简单',
        2:'一般',
        3:'困难'
      }
      return TYPES[value]
    },
    openEvents(){
      // const res = await detail(id)
      // this.fetchQuestionsList()
    },

    previewClosed() {
      this.$emit("close-prevdialog")
      this.flag = false;
    },
    // 转换题型
    transType(value) {
      // console.log('aaa',value)
      const TYPE = {
        1: "单选题",
        2: "多选题",
        3: "简答题"
      };
      return TYPE[value];
    },
     // 视频播放
    openVideo() {
      // 第二次点击关闭视频组件
      if(this.flag) {
        this.flag = false
      }else {
        // 显示视频播放器
        this.flag = true
        // console.log(this.detailList.videoURL);
        const url = this.list.videoURL
        // 等dom元素加载完后修改属性
        this.$nextTick(() => {
          // 测试视频播放
          // this.$refs.myvideo.setAttribute('src', videoCs)
          this.$refs.myvideo.setAttribute('src', url)
          // console.log(this.$refs.myvideo.src);
        })
      }
    },
    rejectChange(item){
      if(item.isRight===1){
        item.isRight=0
      }
    }
  }
};
</script>

<style scoped>
.grid-content {
  margin: 10px 0;
}
.foot-content {
  padding-top: 20px;
  height: 40px;
  margin-top: 50px;
  border-top: 1px solid;
}
.question {
  padding-top: 20px;
  border-top: 1px solid;
}
.answer {
  display: block;
  height: 60px;
  padding: 20px 0;
}
.dialog-footer {
  display: flex;
  justify-content: right;
}
.video {
  display: block;
  border-top: 1px solid;
  padding-top: 20px;
  line-height: 40px;
}
.questColor {
  color: blue;
}
.remarks {
  margin-top: 20px;
}
.demo {
  display: block;
  margin-top: 20px;
  width: 300px;
  height: 200px;
}
</style>
